<template>
  <div class="payable-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="8">
        <el-button type="primary" @click="showCoupon">
          优惠券账户
        </el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="16">
        <el-form inline @submit.native.prevent>
          <el-form-item>
            <el-select v-model="queryForm.status" placeholder="变动类型">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="queryForm.activity_range"
              type="daterange"
              value-format="yyyy-M-d"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="search">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>

    <el-table v-loading="listLoading" :data="list">
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="create_time"
        label="变动时间"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="status_str"
        label="变动类型"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="numbers"
        label="变动数量"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="money"
        label="优惠券面值（元）"
      />

      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="use_money"
        label="抵扣服务费（元）"
      />
    </el-table>

    <!--优惠券弹窗-->
    <el-dialog :visible.sync="couponVisible" title="" width="700px">
      <div class="table_tit">数量{{total}}张</div>
      <el-table
        v-loading="listLoading"
        :data="list2"
        @selection-change="setSelectRows"
      >
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="money"
          label="面额(元)"
          width="120"
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="number"
          label="数量"
          width="220"
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="expiration_date"
          label="截止时间"
        />

      </el-table>
      <el-pagination
        background
        :current-page="queryForm.page"
        :page-size="queryForm.list_row"
        :layout="layout"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="couponVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleCheckConfirm">
            确 定
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-pagination
      background
      :current-page="queryForm2.page"
      :page-size="queryForm2.list_row"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
  import { getList } from '@/api/dc_billQuery'
  import { getticketlogs,getusertickealltlists } from '@/api/coupon'

  export default {
    name: 'CouponRecord',

    data() {
      return {
        selectRows: '',
        list: [],
        list2:[],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        queryForm: {
          page: 1,
          limit: 10,
          status:'',
          date:''
        },
        queryForm2: {
          page: 1,
          limit: 10,
          status:'',
          date:''
        },
        totalMoney: 0,
        couponVisible:false,
        checkData: {
          money:'0',
          radio:'',
          id:''
        },
        options:[{
          value: '1',
          label: '获赠'
        },{
          value: '2',
          label: '使用'
        },{
          value: '3',
          label: '退还'
        }]
      }
    },
    watch: {
      'queryForm.activity_range'(range) {
        console.log(222,range)
        const [start, end] = range || ['','']
        this.queryForm.activity_start = start
        this.queryForm.activity_end = end
        this.queryForm.date = this.queryForm.activity_start + ' - ' + this.queryForm.activity_end
      },
    },
    created() {
      this.getList()
    },

    activated() {
      this.getList()
    },

    methods: {
      setSelectRows(val) {
        this.selectRows = val
      },
      handleCheckConfirm(){
        this.couponVisible = false;
      },

      async showCoupon(){
        this.couponVisible = true;
        console.log(3344,this.queryForm)
        const { data, money, total } = await getusertickealltlists(this.queryForm)
        this.list2 = data
        this.total = total
        this.totalMoney = money
      },
      async getList() {
        this.listLoading = true
        console.log(3344,this.queryForm)
        const { data, money, total } = await getticketlogs(this.queryForm)
        this.list = data
        if(this.list && this.list.length>0){
          this.list.forEach(item =>{
            if(item.status_str==='使用'){
              item.numbers = '-' + item.number
            }else{
              item.numbers = item.number
            }
          })
        }
        this.total = total
        this.totalMoney = money
        this.listLoading = false
      },
      handleSizeChange(val) {
        this.queryForm.list_row = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getList()
      },
      search() {
        this.queryForm.page = 1
        this.getList()
      },
    },
  }
</script>

<style lang="scss" scoped>
.table_tit{
  font-weight: bold;
  margin-bottom: 20px;
  font-size: 16px;
}
  ::v-deep .vab-query-form .left-panel {
    flex-wrap: nowrap;
  }

  .summary-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
  }

  .summary-item:not(:last-child) {
    margin-right: 20px;
  }

  .summary-value {
    margin-right: 4px;
    font-size: 18px;
    font-weight: bold;
    color: #000;
  }

  .search-input {
    width: 260px;
  }
</style>
